<template>
  <!-- <van-image
    width="100"
    height="100"
    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
    @click="showImagePreview(['https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'])"
  /> -->
  <!-- <button
    @click="
      showImagePreview(['/images/2024-11-01_12-47-01_087_4790d77a35eb6404e673c9fa5e6d6266.png'])
    "
  ></button> -->
  <div class="container">
    <NavBar name="首页"></NavBar>
    <img src="@/assets/China_Telecom_logo.svg" class="img" />

    <!-- <van-search @search="handleSearch" v-model="searchValue" placeholder="请输入搜索关键词">
      <template #left-icon>
        <div class="dropdown-trigger" @click="show = !show">
          <span>{{ selectedOption }}</span>
          <van-icon name="arrow-down" class="dropdown-icon" />
        </div>
      </template>
      <template #right-icon><van-icon name="search" @click="handleSearch" /></template>
    </van-search> -->
    <SearchBox></SearchBox>
    <div class="flex-row old-module">
      <div class="flex-item" @click="handleNavigate('article-list?page=1&pageSize=6&type=默认')">
        <img src="@/assets/article.png" />
        <span class="module-name">看课件</span>
      </div>
      <div class="flex-item" @click="handleNavigate('question-list')">
        <img src="@/assets/question.png" />
        <span class="module-name">看需求</span>
      </div>
      <div class="flex-item" @click="handleNavigate('score-query')">
        <img src="@/assets/score.png" />
        <span class="module-name">查积分</span>
      </div>
    </div>
    <div class="new-module" @click="handleNavigate('register')">
      <img src="@/assets/new-module.png" />
      <span class="small-container">
        <div class="title">笔算计算器</div>
        <div class="info">新功能上线，立即前往</div>
      </span>
    </div>
  </div>
  <!-- <van-picker
    title="请选择你要搜索的选项"
    v-if="show"
    :columns="columns"
    @confirm="onConfirm"
    @cancel="show = false"
  /> -->
</template>

<script setup lang="ts">
import { ref } from 'vue'
import NavBar from '@/components/NavBar.vue'
import { useRouter } from 'vue-router'
import { showToast, showImagePreview } from 'vant'
import SearchBox from '@/components/SearchBox.vue'

const router = useRouter()
function handleNavigate(path: any) {
  router.push(path)
}
const searchValue = ref('')

const selectedOption = ref('标题和内容')
const show = ref(false)

const columns = [
  { text: '标题和内容', value: '标题和内容' },
  { text: '上传者', value: '上传者' }
]
const onConfirm = ({ selectedValues }: any) => {
  // showToast(`当前值: ${selectedValues.join(",")}`);
  console.log(selectedValues[0])
  selectedOption.value = selectedValues[0]
  show.value = false
}
function handleSearch() {
  if (searchValue.value === '') {
    showToast('请输入关键词后再搜索')
    return
  }
  // 默认搜索课件
  if (selectedOption.value === '标题和内容') {
    return router.push(`/search-list?page=1&pageSize=6&queryName=${searchValue.value}&module=课件`)
  }
  if (selectedOption.value === '上传者') {
    return router.push(
      `/search-list?page=1&pageSize=6&queryUploader=${searchValue.value}&module=课件`
    )
  }
}
</script>

<style scoped>
.search {
  margin-top: 2rem;
}
.dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
}
:root:root {
  --van-search-input-height: 3rem;
  --van-search-label-font-size: 3rem;
  --van-search-action-font-size: 3rem;
}
.img {
  margin-top: 1rem;
}
.nav {
  background: #ffffff;
  border-radius: 0px 0px 0px 0px;
}
.container {
  padding-left: 4.26vw; /* 16px */
  padding-right: 4.26vw; /* 16px */
}
.img {
  width: 83.73vw; /* 您可以根据需要调整宽度 */
  height: auto; /* 保持图片的宽高比 */
}
/* Flexbox布局容器 */
.flex-row {
  display: flex;
  flex-direction: row; /* 主轴方向为横向 */
  justify-content: space-around;
  align-items: center;
  height: 21.33vw;
}
.flex-item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}
.flex-item img {
  margin-right: 2.13vw; /* 图标右侧间距 */
}
.new-module {
  height: 21.33vw;
  display: flex;
  background: #f5faff;
  border-radius: 2.66vw;
}

.title {
  font-size: 1.4rem;
  padding-top: 0.8rem;

}
.info {
  padding-top: 8.53vw;

  /* padding-top: 1.5rem; */

  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 400;
  font-size: 3.2vw;
  color: #4699ff;
  line-height: 0px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
